<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResourcesPortada.jsp" %>
<script src="<c:url value="/resources/js/portada/departaments/jquery.min.js"/>"></script>
<script src="<c:url value="/resources/js/portada/departaments/jquery.mCustomScrollbar.concat.min.js"/>"></script>

<script src="<c:url value="/resources/js/portada/departaments/sliderman.1.3.8.js"/>"></script>
<link href="<c:url value="/resources/css/portada/department/sliderman.css" />" rel="stylesheet">

<link href="<c:url value="/resources/css/portada/department/jquery.mCustomScrollbar.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/portada/slider/style.css" />" rel="stylesheet">
  <style>
	/*Para Scroll*/
	.links a,.demo_functions a{display:inline-block; padding:3px 15px; margin:7px 10px; background:rgba(255,255,255,0.15); text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	code{color:#5b70ff;}
	.content form input{color:#eee; border:none; background:rgba(0,0,0,0.2); -webkit-border-radius:3px; -moz-border-radius:3px; /*color de input para llenar texto*/ border-radius:3px; margin-bottom:10px; padding:0 5px; height:25px; width:120px; -webkit-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); -moz-box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4); box-shadow:inset 2px 2px 10px rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.4);}
	h1{font-family:Georgia,serif; font-size:18px; font-style:italic; margin:40px; color:#26beff;}
	h2{font-family:Georgia,serif; font-size:18px; font-style:italic; color: #003a96;}
	
	h3{font-family:Georgia,serif; font-size:11px; font-style:italic; color:#666666;}
	h4{font-family: Arial, Helvetica, sans-serif; font-size:14px; font-style:normal; color:#ffffff;}
	h5{font-family: Arial, Helvetica, sans-serif; font-size:12px; font-style:normal; color:#ffffff;}
	hr {border: 0; border-top: 1px solid #999; border-bottom: 1px solid #333; height:0;}
	.links{margin:10px;}
	.links a{display:inline-block; padding:3px 15px; margin:7px 10px; background:#444; text-decoration:none; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
	.links a:hover{background:#eb3755; color:#fff;}
	/*Contenido de scroll tamaño */
	.content{margin:0 0 0px 0px; width:90%; height:800px; padding:10px; overflow:auto; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; float:left;}		
	#content_5{color:#333; background:#e9effd;}
	#content_5  p:nth-child(even){color:#666;}
	
	#container {
	  width: 145px;
	  height: 42px;
	  overflow: hidden;
	}
	/*for product*/
	.c { clear: both; }
	#wrapper2 { margin: 0 auto; padding: 0 10px 10px 0px; width: 100%;}
</style>
<script type="text/javascript">
		/*Para redireccionar el combo*/
		function url(uri) {
		location.href = uri;  }	
				
		(function($){
			$(window).load(function(){
				
				$("#content_5").mCustomScrollbar({
					scrollButtons:{
						enable:true
					},
					theme:"light-thick"
				});
				
			});
		})(jQuery);
		
		/*Para cortar el texto*/
		function createEllipsis ( container ) {
		    $container = $("#" + container);
		    var containerHeight = $container.height();
		    var $text = $container.find("p");
		 
		    while ( $text.outerHeight() > containerHeight ) {
		        $text.text(function (index, text) {
		            return text.replace(/\W*\s(\S)*$/, '...');
		        });
		    }
		 }
		createEllipsis("container");
</script>
</head>

<body>
<c:set var="dept" value="${param._dept}"/>
	<div id="header">																																																																																			
		<div class="logindept">
			<label class="form_align35" style="color: #ffffff;">Departamento :</label>
			<select name="idCountry" id="idCountry" class="required form_input_align" title="Seleccione el Pais" onchange="url(this.value);">
				<option value=""><fmt:message key="form.selected"/></option>
				<c:forEach var="item" items="${comboDepartaments}">
				<c:set var="selec" value="" />
					<c:if test="${dept == item[0]}">
						<c:set var="selec" value="selected='selected'" />
					</c:if>
					<option value="homeDepartamemts.html?_dept=${item[0]}" ${selec}>${item[1]} - ${item[2]}</option>
				</c:forEach>
			</select> 
		</div>
		<ul id="menu">
			<li><a href="index.html">Página de Inicio</a></li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
	</div>
	<div id="wrapper">																																																																																
		<div id="sidebar">
			<div class="logo_block">
				<a href="#"><img src="<c:url value="/resources/images/portada/logo.png" />" alt="setalpm" width="198"/></a><br />
				<div class="myInlineDiv"><h4>ARTÍCULOS DE INTERÉS<br/></h4></div>
				<div id="content_5" class="content">
				<c:forEach var="item" items="${articulosActivos}">
                	<div class="lineDivArticle"><h5>${item.tittle}</h5></div>
	                	<c:forEach var="itemS" items="${listSection}">
	                	<c:if test="${item.articleId == itemS.articleId.articleId}">
	                	<h3>${itemS.tittle}</h3>
	                		<c:choose>
	                			<c:when test="${itemS.image!=null}">
				                	<div class="marco"><img src="<c:url value="/resources/images/portada/departamentos/seccion/${itemS.image}"/>" width="120" height="100"/></div>
				               		<div id="container"><p>${itemS.descriptions}</p></div>...
				                	<a href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemS.articleId.articleId}&_sect=${itemS.sectionId}">Leer Mas</a>
		                		</c:when>
		                		<c:otherwise>
		                			<div id="container"><p>${itemS.descriptions}</p></div>...
				                	<a href="articlesSectiDepartament.html?_dept=${dept}&_arti=${itemS.articleId.articleId}&_sect=${itemS.sectionId}">Leer Mas</a>
		                		</c:otherwise>
		                	</c:choose><br/><br/>
			            </c:if>
		                </c:forEach>
            		<hr><br/>
				</c:forEach>
				</div>
			</div>
		</div>
		<div id="content">
			<ul class="filterRef group"> 
					<li><a href="http://localhost:8080/farmasoft/index"><img src="<c:url value="/resources/images/portada/inicio.png" />" width="18"/></a></li>
					<c:forEach var="itemD" items="${Departament}">
						<li><span>${itemD[1]}</span></li>
					</c:forEach>
			</ul>
			
			<div class="bg">
				<div class="column1">
					<c:forEach var="item" items="${Departament}">
	                   <center><h2>${item[1]} - ${item[2]}</h2></center><br />
	                </c:forEach>
					<div id="content1">
						<div id="wowslider-container1">
							<div class="ws_images">
								<ul>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/compra.png"/>" alt="Venta" title="Venta" id="wows1_0"/>Venta de productos</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/familia.png"/>" alt="Familia" title="Familia" id="wows1_1"/>Productos para la familia</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/llenar_productos.png"/>" alt="Productos" title="Productos" id="wows1_2"/>Registrar productos</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/registrar_personal.png"/>" alt="Personal" title="Personal" id="wows1_3"/>Registrar personal</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/registrar_productos.png"/>" alt="Buscar" title="Busqueda" id="wows1_4"/>Buscar producto</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/sugerir_producto.png"/>" alt="Sugerir" title="Sugerir" id="wows1_5"/>Sugerir producto</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/visitador.png"/>" alt="Visitador" title="Visitador" id="wows1_6"/>Registrar visitadores</li>
									<li><img src="<c:url value="/resources/images/portada/slider/mainImages/almacen.png"/>" alt="Almacen" title="Almacen" id="wows1_7"/>Verificar si hay en almacen</li>
								</ul>
							</div>
							<div class="ws_shadow"></div>
							<script src="<c:url value="/resources/js/portada/slider/wowslider.js" />"></script>
							<script src="<c:url value="/resources/js/portada/slider/script.js" />"></script>
						</div><br/><br/><br/>
						
						<h2>Videos </h2>
						 <div>
						 	<center>
								<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=FarmaSoftBolivia&synd=open&w=320&h=380&output=js"></script>
							</center>
							<!-- iframe id="fr" style="overflow: hidden; height: 105px; width: 300px; border: 0;" name="fr" src="http://www.youtube.com/subscribe_widget?p=FarmaSoftBolivia" height="240" width="320" frameborder="0" scrolling="no"></iframe-->
						</div>
						<p>Deja tus comentarios: </p>
						<div>
							<div id="fb-root"></div>
							<script>(function(d, s, id) {
							  var js, fjs = d.getElementsByTagName(s)[0];
							  if (d.getElementById(id)) return;
							  js = d.createElement(s); js.id = id;
							  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.0";
							  fjs.parentNode.insertBefore(js, fjs);
							}(document, 'script', 'facebook-jssdk'));</script>
							<div class="fb-comments" data-href="https://www.facebook.com/farmasoft.bo?fref=ts" data-numposts="2" data-colorscheme="light" width="480" height="200"></div>
							
						</div>		
					</div>
				</div>
				<div class="column2">
					<div id="wrapper2">
					<div id="examples_outer">
						<div class="myInlineDiv"><h4>PRODUCTOS<br/></h4></div>
						<div id="slider_container_1">
							<div id="SliderName">
								<a href="#1">
									<img src="<c:url value="/resources/images/portada/productImagen/1.jpg"/>" title="Description from Image Title" />
								</a>
								<div class="SliderNameDescription">
									<strong>Juanola</strong><br />Integer <a href="javascript:void(0);"> Juanola en jarabe </a>Ayuda a desinflamar la garganta y le recupera del resfrio...
								</div>
								<a href="#2">
									<img src="<c:url value="/resources/images/portada/productImagen/2.jpg"/>" />
									<div class="SliderNameDescription"><a href="#3">Tamiflu </a> Regula la fiebre alta y la inflamación del estomago...Asi dandole un alivio a su salud. </div>
								</a>
								<img src="<c:url value="/resources/images/portada/productImagen/3.jpg"/>" />
								<div class="SliderNameDescription"><a href="#3">Extracto de Própolis </a> Ayuda en a recuperar a su niño de la gripe...</div>
								<img src="<c:url value="/resources/images/portada/productImagen/4.jpg"/>"/>
								<div class="SliderNameDescription"><strong>Diclofenaco </strong><br />Este medicamento actúa reduciendo las sustancias en el cuerpo que causan dolor inflamación, se usa para tratar el dolor o la inflamación...</div>
							</div>
							<div class="c"></div>
							<div id="SliderNameNavigation"></div>
							<div class="c"></div>
			
							<script type="text/javascript">
								// we created new effect and called it 'demo01'. We use this name later.
								Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});
			
								var demoSlider = Sliderman.slider({container: 'SliderName', width: 180, height: 250, effects: 'demo01',
								display: {
									pause: true, // slider pauses on mouseover
									autoplay: 3000, // 3 seconds slideshow
									always_show_loading: 200, // testing loading mode
									description: {background: '#ffffff', opacity: 0.5, height: 80, position: 'bottom'}, // image description box settings
									loading: {background: '#000000', opacity: 0.2, image: '../images/product/loading.gif'}, // loading box settings
									buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
									navigation: {container: 'SliderNameNavigation', label: '&nbsp;'} // navigation (pages) settings
								}});
			
							</script>
			
							<div class="c"></div>
						</div>
						<div class="c"></div>
					</div>
			
					<div class="c"></div>
				</div>
				<a class="button" title="Buscar farmacia" href="#">Encuentre a su Farmacia mas cercana</a><br/>
				<div class="myInlineDiv"><h4>NOTICIAS<br/></h4></div>
					
					<div class="news">
						<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ffarmasoft.bo%3Ffref%3Dts&amp;width=200&amp;height=550&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=true&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:580px;" allowTransparency="true"></iframe>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">																																																																																																																																																																																																									
		<ul>
			<li><a href="index.html">Página de Inicio</a>|</li>
			<li><a href="articlesDepartmentsAll.html?_dept=${dept}">Artículos de Interés</a></li>
		</ul>
		<p>UltraSoft Ltda.&copy; Soluciones Informáticas. <a href="https://www.facebook.com/farmasoft.bo" target="_blank" title="Best Free Templates">FarmaSoft</a>  </p>
	</div>
</body>

</html>

